<template>
  <f7-page>
    <f7-navbar title="卡片" back-link></f7-navbar>

    <div class="tien-bar bg-white solid-bottom">
      <div class="action">
        <span class="tien-icon-titles text-orange"></span> 案例类卡片
      </div>
      <div class="action">
        <switch class="sm" checked="1" bindchange="isCard"></switch>
      </div>
    </div>
    <div class="tien-card case no-card">
      <div class="tien-item shadow">
        <div class="image">
          <img src="https://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix">
          <div class="tien-tag bg-blue">福利</div>
          <div class="tien-bar bg-shadeBottom">我和制服不得不说的那些事！</div>
        </div>
        <div class="tien-list menu menu-avatar">
          <div class="tien-item">
            <div
              class="tien-avatar round lg"
              style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"
            ></div>
            <div class="content flex-sub">
              <div class="text-grey">猪皮蛋</div>
              <div class="text-gray text-sm flex justify-between">十天前
                <div class="text-gray text-sm">
                  <span class="tien-icon-attentionfill"></span> 10
                  <span class="tien-icon-appreciatefill"></span> 20
                  <span class="tien-icon-messagefill"></span> 30
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tien-bar bg-white solid-bottom margin-top">
      <div class="action">
        <span class="tien-icon-titles text-orange"></span> 动态类卡片
      </div>
    </div>
    <div class="tien-card dynamic">
      <div class="tien-item shadow">
        <div class="tien-list menu menu-avatar">
          <div class="tien-item">
            <div
              class="tien-avatar round lg"
              style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"
            ></div>
            <div class="content flex-sub">
              <div>晓晓萌</div>
              <div class="text-gray text-sm flex justify-between">2018年12月3日</div>
            </div>
          </div>
        </div>
        <div class="text-content">你们的铲屎官是不是经常突然对手机傻笑？我家铲屎官常常坐沙发上笑的发抖！（暗中观察.jpg）</div>
        <div class="grid col-3 grid-square flex-sub padding-lr">
          <div
            class="bg-img only-img"
            style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"
          ></div>
        </div>
        <div class="text-gray text-sm text-right padding">
          <span class="tien-icon-attentionfill"></span> 10
          <span class="tien-icon-appreciatefill"></span> 20
          <span class="tien-icon-messagefill"></span> 30
        </div>
        <div class="tien-list menu menu-avatar comment solids-top">
          <div class="tien-item" v-for="(index) in 2">
            <div
              class="tien-avatar round"
              style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"
            ></div>
            <div class="content">
              <div class="text-grey">猪皮蛋</div>
              <div class="text-gray text-content text-df">我家铲屎官不舔毛，还抠脚！</div>
              <div class="bg-grey padding-sm radius margin-top-sm text-sm">
                <div v-for="(index) in 2" :class="index!=0?'margin-top-sm':'' " class="flex">
                  <div>我：</div>
                  <div class="flex-sub">我家的铲屎官也不舔毛！</div>
                </div>
              </div>
              <div class="margin-top-sm flex justify-between">
                <div class="text-gray text-df">2018年12月4日</div>
                <div>
                  <span class="tien-icon-appreciatefill"></span>
                  <span class="tien-icon-messagefill text-gray margin-left-sm"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tien-bar bg-white solid-bottom margin-top">
      <div class="action">
        <span class="tien-icon-titles text-orange"></span> 文章类卡片
      </div>
    </div>
    <div class="tien-card article no-card">
      <div wx:key class="tien-item shadow">
        <div class="title">这里有个戏精铲屎官，主子了解一下？</div>
        <div class="content">
          <img style="width: 120px;height:100px;" src="https://image.weilanwl.com/img/4x3-3.jpg">
          <div class="desc">
            <div class="text-content">这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</div>
            <div>
              <div class="tien-tag bg-red light sm round">假装有猫系列</div>
              <div class="tien-tag bg-green light sm round">戏精系列</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </f7-page>
</template>

<script>
import '../../css/colorui/card.css';
import '../../css/colorui/avatar.css';
import '../../css/colorui/text.css';
export default {
  name: "icon",
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

